<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8" />
	<title>Adaptive Cards Example</title>

	<script src="https://unpkg.com/markdown-it@8.4.0/dist/markdown-it.js"></script>
    <script src="https://unpkg.com/adaptivecards/dist/adaptivecards.min.js"></script>
	<script type="text/javascript" src="node_modules/adaptive-expressions/lib/browser.js"></script>
	
	<script type="text/javascript" src="dist/adaptivecards-templating.js"></script>
	

	<style type="text/css">
		#exampleDiv {
			width: 250px;
			border: solid 1px black;
		}
	</style>

	<script type="text/javascript">
		function renderCard() {
            // Define a template payload
			var templatePayload = {
				"type": "AdaptiveCard",
				"version": "1.2",
				"body": [
                    {
                        "type": "TextBlock",
                        "text": "Hello ${name}!"
					}
				]
            };
            
            // Create a Template instance from the template payload
            var template = new ACData.Template(templatePayload);

            // Create a data binding context, and set its $root property to the
            // data object to bind the template to
            var context = {
                $root : {
                    "name": "Adaptive Cards"
                }
            };

            // "Expand" the template - this generates the final Adaptive Card,
            // ready to render
            var card = template.expand(context);

            // Render the card
			var adaptiveCard = new AdaptiveCards.AdaptiveCard();
			adaptiveCard.parse(card);

			document.getElementById('exampleDiv').appendChild(adaptiveCard.render());
		}
	</script>

</head>

<body onload="renderCard()">
	<h1>Adaptive Cards Data Binding Example</h1>

	<div id="exampleDiv"></div>
</html>